<template>
    <el-container>
        <el-header>
            <h1>{{ restaurant.name }}</h1>
        </el-header>
        <el-main>
            <img :src="restaurant.image" alt="餐厅图片">
            <h2>菜品列表</h2>
            <el-row>
                <el-col :span="8" v-for="dish in restaurant.dishes" :key="dish.name">
                    <el-card>
                        <img :src="dish.image" alt="菜品图片">
                        <div>
                            <h3>{{ dish.name }}</h3>
                            <p>价格：{{ dish.price }}元</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <h2>用户评分与评价</h2>
            <el-row>
                <el-col>
                    <div v-for="review in restaurant.reviews" :key="review.id">
                        <h3>{{ review.user }}</h3>
                        <p>{{ review.content }}</p>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                restaurant: {
                    name: '一食堂',
                    image: '@/assets/一食堂.jpg',
                    dishes: [
                        { name: '瓦香鸡', price: 14, image: '@/assets/dish1.jpg' },
                        { name: '麻辣烫', price: 15, image: '@/assets/dish2.jpg' },
                        { name: '米球球套餐', price: 8, image: '@/assets/dish3.jpg' }
                    ],
                    reviews: [
                        { id: 1, user: 'lyf', content: '瓦香鸡很好吃，推荐！' },
                        { id: 2, user: 'sbz', content: '麻辣烫味道正宗，辣度适中。' },
                        { id: 3, user: 'zjj', content: '米球球套餐价格实惠，量足。' }
                        // ...其他评论
                    ]
                }
            };
        }
    };
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        text-align: center;
    }
</style>